<template>
  <div class="video-main-layout">
    <v-row no-gutters>
      <!-- 左侧视频播放区 -->
      <v-col cols="12" md="8" class="video-player-col">
        <div class="video-player-wrapper">
          <video
            v-if="selectedVideo"
            :src="`/videos/${selectedVideo.file}`"
            :poster="`/covers/${selectedVideo.cover}`"
            controls
            ref="mainVideo"
            @loadedmetadata="updateDuration"
          ></video>
        </div>
      </v-col>
      <!-- 右侧影片选择区 -->
      <v-col cols="12" md="4" class="video-list-col">
        <div class="video-list-title">视频选集</div>
        <div class="video-list">
          <div
            v-for="video in videoList"
            :key="video.file"
            :class="['video-list-item', {active: selectedVideo && selectedVideo.file === video.file}]"
            @click="selectVideo(video)"
          >
            <img :src="`/covers/${video.cover}`" class="video-cover" />
            <div class="video-info">
              <div class="video-title">{{ video.title }}</div>
              <div class="video-duration">{{ video.duration || '--:--' }}</div>
            </div>
          </div>
        </div>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  name: "Dash1",
  data() {
    return {
      videoList: [
        { title: "哪吒之魔童降世", file: "movie1.mp4", cover: "movie1.jpg", duration: "" },
        { title: "战狼2", file: "movie2.mp4", cover: "movie2.jpg", duration: "" },
        { title: "阿凡达", file: "movie3.mp4", cover: "movie3.jpg", duration: "" },
        { title: "楚门的世界", file: "movie4.mp4", cover: "movie4.jpg", duration: "" },
        { title: "从你的全世界路过", file: "movie5.mp4", cover: "movie5.jpg", duration: "" },
        { title: "流浪地球", file: "movie6.mp4", cover: "movie6.jpg", duration: "" },
        { title: "你的名字", file: "movie7.mp4", cover: "movie7.jpg", duration: "" },
        { title: "无间道", file: "movie8.mp4", cover: "movie8.jpg", duration: "" },
        { title: "星际穿越", file: "movie9.mp4", cover: "movie9.jpg", duration: "" }
      ],
      selectedVideo: null
    };
  },
  mounted() {
    this.selectedVideo = this.videoList[0];
  },
  methods: {
    selectVideo(video) {
      this.selectedVideo = video;
      this.$nextTick(() => {
        this.$refs.mainVideo.load();
      });
    },
    updateDuration(e) {
      // 自动获取并显示时长
      const video = this.selectedVideo;
      if (video && e.target.duration) {
        video.duration = this.formatDuration(e.target.duration);
      }
    },
    formatDuration(seconds) {
      const m = Math.floor(seconds / 60).toString().padStart(2, '0');
      const s = Math.floor(seconds % 60).toString().padStart(2, '0');
      return `${m}:${s}`;
    }
  }
};
</script>

<style scoped>
.video-main-layout {
  background: #181818;
  min-height: 100vh;
  padding: 32px 0;
}
.video-player-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-player-wrapper {
  width: 90%;
  max-width: 900px;
  background: #111;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  padding: 24px;
  display: flex;
  justify-content: center;
}
video {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  background: #000;
}
.video-list-col {
  background: #202020;
  padding: 24px 0 24px 12px;
  min-height: 600px;
}
.video-list-title {
  color: #2dd4bf;
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 18px;
  text-align: left;
  padding-left: 12px;
}
.video-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.video-list-item {
  display: flex;
  align-items: center;
  background: #23272f;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  padding: 8px 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.video-list-item.active, .video-list-item:hover {
  background: #2dd4bf22;
}
.video-cover {
  width: 80px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 14px;
  background: #333;
}
.video-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.video-title {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 4px;
}
.video-duration {
  color: #aaa;
  font-size: 0.95rem;
  text-align: left;
}
</style>
